<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-date-picker
        v-model="listQuery.dateTime"
        style="positon:relative;top:1px"
        type="daterange"
        format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        value-format="yyyy-MM-dd HH:mm:ss"
      /> -->
      <el-date-picker
        v-model="listQuery.startTime"
        style="width: 140px;top:1px"
        type="date"
        placeholder="开始日期"
        value-format="yyyy-MM-dd 00:00:00"
      />
      <el-date-picker
        v-model="listQuery.endTime"
        style="width: 140px;top:1px"
        type="date"
        placeholder="结束日期"
        value-format="yyyy-MM-dd 23:59:59"
      />
      <el-select v-model="listQuery.orgId" style="width: 140px" placeholder="选择机构" class="filter-item" :clearable="true" @change="OrgChange">
        <el-option
          v-for="(item,index) in OrgList"
          :key="index"
          :label="item.orgName"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.hallId" style="width: 140px" placeholder="选择大厅" class="filter-item" :clearable="true" @change="HallChange">
        <el-option
          v-for="(item,index) in HallList"
          :key="index"
          :label="item.hallName"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.windowId" style="width: 140px" placeholder="选择窗口" class="filter-item">
        <el-option
          v-for="(item,index) in WindowList"
          :key="index"
          :label="item.windowName"
          :value="item.id"
        />
      </el-select>
      <el-select v-model="listQuery.type" style="width: 140px" placeholder="评价结果" class="filter-item">
        <el-option value="1">不满意</el-option>
        <el-option value="2">基本满意</el-option>
        <el-option value="3">满意</el-option>
        <el-option value="3">非常满意</el-option>
      </el-select>
      <el-input v-model="listQuery.jobNUmber" placeholder="用户工号" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button> -->
      <!-- <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download">
        新增
      </el-button> -->
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="用户名" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="工号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.jobNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column label="机构" align="center">
        <template slot-scope="{row}">
          <span>{{ row.orgName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="大厅" align="center">
        <template slot-scope="{row}">
          {{ row.hallName }}
        </template>
      </el-table-column>
      <el-table-column label="窗口" align="center">
        <template slot-scope="{row}">
          <span>{{ row.windowName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评价时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.evaluateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="评价结果" align="center">
        <template slot-scope="{row}">
          <span>{{ row.resultDesc }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  </div>
</template>
<style >
  .filter-container .filter-item{
    margin-bottom:0
  }
</style>
<script>
// import { getData } from '@/api/querystats'
import { getAllOrgList, getListByOrgId, getListByHallId } from '@/api/public'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { pageQuare } from '@/api/querystats'
export default {
  name: 'Mulsearch',
  components: { Pagination },
  directives: { waves },

  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        'startTime': '',
        'endTime': '',
        'hallId': '',
        'jobNUmber': '',
        'limit': 10,
        'orgId': '',
        'page': 1,
        'type': '',
        'windowId': ''
      },
      OrgList: [],
      HallList: [],
      WindowList: []
    }
  },
  created() {
    this.handleFilter()
    getAllOrgList().then(res => {
      this.OrgList = res.data
    })
  },
  methods: {
    getList() {
      this.listLoading = true
      const { startTime, endTime, hallId, jobNUmber, orgId, type, windowId } = this.listQuery
      pageQuare({
        'startTime': startTime,
        'endTime': endTime,
        'hallId': hallId,
        'jobNUmber': jobNUmber,
        'limit': 10,
        'orgId': orgId,
        'page': 1,
        'type': type,
        'windowId': windowId
      }).then(response => {
        console.log('TCL: getList -> response', response)
        this.list = response.data.list
        console.log('TCL: getList -> this.list ', this.list)
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    OrgChange(val) {
      if (val === '') {
        this.HallList = []
        return
      }
      getListByOrgId({ id: val }).then(res => {
        this.HallList = res.data
        console.log('TCL: created -> this.HallList', this.HallList)
      })
    },
    HallChange(val) {
      if (val === '') {
        this.WindowList = []
        return
      }
      getListByHallId({ id: val }).then(res => {
        this.WindowList = res.data
      })
    }
  }
}
</script>
